iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
Mobile Development

App從開發到上架系列 第 11

Day11: iOS 開發:畫面建構(會員) - MemberShipViewController

  • 分享至 

  • xImage
  •  

今天先把會員介面先建立起來:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="21701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina6_12" orientation="portrait" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21679"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="MemberShipViewController" customModule="FoodDemo" customModuleProvider="target">
            <connections>
                <outlet property="txfAccount" destination="P5O-5L-6xZ" id="00T-8d-cuE"/>
                <outlet property="txfPassword" destination="J5z-Ys-xXe" id="iGX-7a-Veo"/>
                <outlet property="view" destination="i5M-Pr-FkT" id="sfx-zR-JGt"/>
            </connections>
        </placeholder>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" id="i5M-Pr-FkT">
            <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Welcome!" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="s80-oM-FY2">
                    <rect key="frame" x="100.99999999999997" y="82.333333333333329" width="314.33333333333326" height="34.333333333333329"/>
                    <fontDescription key="fontDescription" type="system" pointSize="33"/>
                    <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                    <nil key="highlightedColor"/>
                </label>
                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="member" translatesAutoresizingMaskIntoConstraints="NO" id="ZEm-Vm-Sf6">
                    <rect key="frame" x="20" y="69" width="61" height="61"/>
                    <color key="backgroundColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                    <color key="tintColor" systemColor="systemOrangeColor"/>
                    <constraints>
                        <constraint firstAttribute="width" secondItem="ZEm-Vm-Sf6" secondAttribute="height" multiplier="1:1" id="EXs-Hf-ul7"/>
                    </constraints>
                </imageView>
                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" translatesAutoresizingMaskIntoConstraints="NO" id="qeO-Np-xVr">
                    <rect key="frame" x="18" y="278.66666666666669" width="357" height="200"/>
                    <subviews>
                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="oio-Jy-f1J">
                            <rect key="frame" x="0.0" y="0.0" width="357" height="100"/>
                            <subviews>
                                <textField opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="248" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Account" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="P5O-5L-6xZ">
                                    <rect key="frame" x="46.666666666666686" y="32.333333333333314" width="250" height="35"/>
                                    <color key="backgroundColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                    <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                    <textInputTraits key="textInputTraits"/>
                                </textField>
                                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="mail" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="3Pq-hs-nUh">
                                    <rect key="frame" x="8.0000000000000018" y="36.666666666666664" width="23.666666666666671" height="27"/>
                                    <color key="tintColor" systemColor="systemOrangeColor"/>
                                </imageView>
                            </subviews>
                            <color key="backgroundColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                            <constraints>
                                <constraint firstItem="3Pq-hs-nUh" firstAttribute="leading" secondItem="oio-Jy-f1J" secondAttribute="leading" constant="8" id="EzQ-zF-Pkm"/>
                                <constraint firstItem="P5O-5L-6xZ" firstAttribute="centerY" secondItem="oio-Jy-f1J" secondAttribute="centerY" id="K53-jp-TO6"/>
                                <constraint firstItem="P5O-5L-6xZ" firstAttribute="height" secondItem="oio-Jy-f1J" secondAttribute="height" multiplier="0.35" id="LTe-7f-COb"/>
                                <constraint firstItem="P5O-5L-6xZ" firstAttribute="width" secondItem="oio-Jy-f1J" secondAttribute="width" multiplier="0.7" id="hw3-j1-9md"/>
                                <constraint firstItem="3Pq-hs-nUh" firstAttribute="height" secondItem="oio-Jy-f1J" secondAttribute="height" multiplier="0.3" id="i6T-71-Iqt"/>
                                <constraint firstItem="P5O-5L-6xZ" firstAttribute="leading" secondItem="3Pq-hs-nUh" secondAttribute="trailing" constant="15" id="imn-eU-gRt"/>
                                <constraint firstItem="3Pq-hs-nUh" firstAttribute="centerY" secondItem="oio-Jy-f1J" secondAttribute="centerY" id="wcH-T4-fjh"/>
                            </constraints>
                        </view>
                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Jj4-iB-zuY">
                            <rect key="frame" x="0.0" y="100" width="357" height="100"/>
                            <subviews>
                                <textField opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="248" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Password" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="J5z-Ys-xXe">
                                    <rect key="frame" x="53" y="32.333333333333314" width="250" height="35"/>
                                    <color key="backgroundColor" systemColor="labelColor"/>
                                    <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                    <textInputTraits key="textInputTraits"/>
                                </textField>
                                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="lock" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="yDD-GQ-b24">
                                    <rect key="frame" x="8" y="36" width="30" height="28"/>
                                    <color key="tintColor" systemColor="systemOrangeColor"/>
                                    <constraints>
                                        <constraint firstAttribute="width" secondItem="yDD-GQ-b24" secondAttribute="height" multiplier="1:1" id="NmJ-Vq-NOt"/>
                                    </constraints>
                                </imageView>
                            </subviews>
                            <color key="backgroundColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                            <constraints>
                                <constraint firstItem="J5z-Ys-xXe" firstAttribute="leading" secondItem="yDD-GQ-b24" secondAttribute="trailing" constant="15" id="AsZ-FY-ujI"/>
                                <constraint firstItem="yDD-GQ-b24" firstAttribute="leading" secondItem="Jj4-iB-zuY" secondAttribute="leading" constant="8" id="Dxz-Sr-jRE"/>
                                <constraint firstItem="J5z-Ys-xXe" firstAttribute="centerY" secondItem="Jj4-iB-zuY" secondAttribute="centerY" id="EmW-0c-jl6"/>
                                <constraint firstItem="J5z-Ys-xXe" firstAttribute="width" secondItem="Jj4-iB-zuY" secondAttribute="width" multiplier="0.7" id="XZ2-Rt-cWR"/>
                                <constraint firstItem="yDD-GQ-b24" firstAttribute="centerY" secondItem="Jj4-iB-zuY" secondAttribute="centerY" id="ddg-Yp-BxY"/>
                                <constraint firstItem="yDD-GQ-b24" firstAttribute="height" secondItem="Jj4-iB-zuY" secondAttribute="height" multiplier="0.3" id="jR8-7z-hbF"/>
                                <constraint firstItem="J5z-Ys-xXe" firstAttribute="height" secondItem="Jj4-iB-zuY" secondAttribute="height" multiplier="0.35" id="tWl-Tb-HAw"/>
                            </constraints>
                        </view>
                    </subviews>
                </stackView>
                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="p9O-LL-XZD" customClass="CustomButton" customModule="FoodDemo" customModuleProvider="target">
                    <rect key="frame" x="39.333333333333343" y="735.33333333333337" width="314.33333333333326" height="42.666666666666629"/>
                    <color key="backgroundColor" systemColor="systemOrangeColor"/>
                    <color key="tintColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                    <state key="normal" title="Button"/>
                    <buttonConfiguration key="configuration" style="plain" title="Login"/>
                    <userDefinedRuntimeAttributes>
                        <userDefinedRuntimeAttribute type="color" keyPath="borderColor">
                            <color key="value" systemColor="systemOrangeColor"/>
                        </userDefinedRuntimeAttribute>
                        <userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
                            <real key="value" value="18"/>
                        </userDefinedRuntimeAttribute>
                        <userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
                            <real key="value" value="2"/>
                        </userDefinedRuntimeAttribute>
                    </userDefinedRuntimeAttributes>
                </button>
            </subviews>
            <viewLayoutGuide key="safeArea" id="fnl-2z-Ty3"/>
            <color key="backgroundColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
            <constraints>
                <constraint firstItem="qeO-Np-xVr" firstAttribute="width" secondItem="i5M-Pr-FkT" secondAttribute="width" multiplier="0.908397" id="2xK-J7-QRU"/>
                <constraint firstItem="qeO-Np-xVr" firstAttribute="centerY" secondItem="fnl-2z-Ty3" secondAttribute="centerY" constant="-60" id="3Qc-TW-YE6"/>
                <constraint firstItem="s80-oM-FY2" firstAttribute="width" secondItem="i5M-Pr-FkT" secondAttribute="width" multiplier="0.8" id="4Lg-D1-No4"/>
                <constraint firstItem="qeO-Np-xVr" firstAttribute="centerX" secondItem="fnl-2z-Ty3" secondAttribute="centerX" id="4i0-j1-Bg6"/>
                <constraint firstItem="s80-oM-FY2" firstAttribute="centerY" secondItem="ZEm-Vm-Sf6" secondAttribute="centerY" id="8M1-JH-cxr"/>
                <constraint firstItem="ZEm-Vm-Sf6" firstAttribute="top" secondItem="fnl-2z-Ty3" secondAttribute="top" constant="10" id="8yA-Nf-jxG"/>
                <constraint firstItem="ZEm-Vm-Sf6" firstAttribute="height" secondItem="i5M-Pr-FkT" secondAttribute="height" multiplier="0.0715962" id="EwV-cP-kCY"/>
                <constraint firstItem="ZEm-Vm-Sf6" firstAttribute="leading" secondItem="fnl-2z-Ty3" secondAttribute="leading" constant="20" id="JOZ-hy-9ZQ"/>
                <constraint firstItem="s80-oM-FY2" firstAttribute="leading" secondItem="ZEm-Vm-Sf6" secondAttribute="trailing" constant="20" id="V0g-uW-204"/>
                <constraint firstItem="s80-oM-FY2" firstAttribute="height" secondItem="i5M-Pr-FkT" secondAttribute="height" multiplier="0.04" id="XW0-2D-Uqf"/>
                <constraint firstItem="p9O-LL-XZD" firstAttribute="height" secondItem="i5M-Pr-FkT" secondAttribute="height" multiplier="0.05" id="fd3-Bu-npB"/>
                <constraint firstItem="p9O-LL-XZD" firstAttribute="width" secondItem="i5M-Pr-FkT" secondAttribute="width" multiplier="0.8" id="hx0-Gi-z4h"/>
                <constraint firstItem="fnl-2z-Ty3" firstAttribute="bottom" secondItem="p9O-LL-XZD" secondAttribute="bottom" constant="40" id="ohz-15-Edl"/>
                <constraint firstItem="p9O-LL-XZD" firstAttribute="centerX" secondItem="fnl-2z-Ty3" secondAttribute="centerX" id="rFC-7C-wtK"/>
                <constraint firstItem="qeO-Np-xVr" firstAttribute="height" secondItem="i5M-Pr-FkT" secondAttribute="height" multiplier="0.234742" id="xU4-oU-rrl"/>
            </constraints>
            <point key="canvasLocation" x="55.725190839694655" y="-12.67605633802817"/>
        </view>
    </objects>
    <designables>
        <designable name="p9O-LL-XZD">
            <size key="intrinsicContentSize" width="65.666666666666671" height="34.333333333333336"/>
        </designable>
    </designables>
    <resources>
        <image name="lock" catalog="system" width="125" height="128"/>
        <image name="mail" catalog="system" width="128" height="93"/>
        <image name="member" width="48" height="48"/>
        <systemColor name="labelColor">
            <color red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
        </systemColor>
        <systemColor name="systemOrangeColor">
            <color red="1" green="0.58431372549019611" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
        </systemColor>
    </resources>
</document>


上一篇
Day10: iOS 開發:畫面建構(首頁) - CollectionView的一些使用方法
下一篇
Day13: iOS 開發:畫面功能(會員) - 基本註冊
系列文
App從開發到上架30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言